<template>
	<view class="page" :class="getThemeClass">
		<unavbar :isback="false" title="AI创作" class="my-nav-ber-a-box mallunavbar">
			<view class="malltab flex justify-between align-center">
				<!-- <view class="text-main size-30" :class="tabcolor == 1 ?'text_green':''" @click="mallcbtn">
					藏品商城
				</view>
				<view class="text-main size-30" :class="tabcolor== 2 ?'text_green':''" @click="marketcbtn">
					流转市场
				</view> -->
				<view @click="showTop = true">
					<image style="width:38rpx;height:36rpx" src="/static/images/35.png"></image>
				</view>
				<view class="flex align-center justify-end">
					<view class="bg1 flex align-center">
						<image style="width:26rpx;height:26rpx" class="u-m-r-5" src="/static/images/36.png"></image>
						230积分
					</view>
					<image @click="go1" style="width:42rpx;height:42rpx" src="/static/images/38.png"></image>
				</view>
			</view>
		</unavbar>
		<u-popup v-model="showTop" close-icon-color="#fff" close-icon-size="44"	class="styleMy" mode="left" length="100%" mask safe-area-inset-bottom z-index="99999"	closeable  :mask-close-able="false">
			<view class="popsty">
				<view class="tit">AI创作</view>
				<view>
						<view class="flex justify-between align-center line-09">
							<view class="flex align-center">
								<image style="width:70rpx;height:70rpx;margin-right:46rpx" src="/static/images/img/5.png"></image>
								<view class="t1">
										<view>AI大赛</view>
										<text>艺术的新纪元，创意之源</text>
								</view>
							</view>
							<view>
								<image style="width:12rpx;height:18rpx" src="/static/images/img/10.png"></image>
							</view>
						</view>
						<view class="flex justify-between align-center line-09">
							<view class="flex align-center">
								<image style="width:70rpx;height:70rpx;margin-right:46rpx" src="/static/images/img/1.png"></image>
								<view class="t1">
										<view>AI课程</view>
										<text>元宇宙艺术，AI绘画大师</text>
								</view>
							</view>
							<view>
								<image style="width:12rpx;height:18rpx" src="/static/images/img/10.png"></image>
							</view>
						</view>
						<view class="flex justify-between align-center line-09" @click="go09('/pages/tabbar/bazaar/zy')">
							<view class="flex align-center">
								<image style="width:70rpx;height:70rpx;margin-right:46rpx" src="/static/images/img/2.png"></image>
								<view class="t1">
										<view>咒语创造器</view>
										<text>二次元魔术师必备手册</text>
								</view>
							</view>
							<view>
								<image style="width:12rpx;height:18rpx" src="/static/images/img/10.png"></image>
							</view>
						</view>
						<view class="flex justify-between align-center line-09"  @click="go09('/pages/tabbar/bazaar/zyTwo')">
							<view class="flex align-center">
								<image style="width:70rpx;height:70rpx;margin-right:46rpx" src="/static/images/img/3.png"></image>
								<view class="t1">
										<view>咒语解析器</view>
										<text>图像识别，转化为Tag</text>
								</view>
							</view>
							<view>
								<image style="width:12rpx;height:18rpx" src="/static/images/img/10.png"></image>
							</view>
						</view>
						<view class="flex justify-between align-center line-09"  @click="go09('/pages/tabbar/bazaar/type')">
							<view class="flex align-center">
								<image style="width:70rpx;height:70rpx;margin-right:46rpx" src="/static/images/img/4.png"></image>
								<view class="t1">
										<view>标签指南</view>
										<text>AI模型标签大全</text>
								</view>
							</view>
							<view>
								<image style="width:12rpx;height:18rpx" src="/static/images/img/10.png"></image>
							</view>
						</view>
				</view>
				<view class="popFix">
					<view @click="qqshequn">
						<image src="/static/images/img/9.png"></image>QQ社群
					</view>
					<view @click="xiaoshushou">
						<image src="/static/images/img/6.png"></image>小助手
					</view>
					<view>
						<image src="/static/images/img/7.png"></image>权益卡
					</view>
					<view>
						<image src="/static/images/img/8.png"></image>创作指南
					</view>
				</view>
			</view>
		</u-popup>

		<view class="mall_concent">
			<view class="slide_type_list">
					<view @click="fun(1)" class="mjstyle " :class="active == 1 ? 'active':''">
						MJ模型<image src="/static/images/img/28.png" style="margin-left:4px; width:62rpx;height:28rpx"></image>
					</view>
					<view @click="fun(2)" class="mjstyle" :class="active == 2 ? 'active':''">SD模型</view>
				<!-- <view @click="activeFun(index,item)" v-for="(item,index) in typeArray" :key="index" :class=" item.type == active ? 'active':''">
					{{ item.name }}
				</view> -->
			</view>
			<!-- <view class="home-sdchange flex justify-between align-center">
				<view class="sdchange_icon flex justify-between align-center">

				</view>
				<view class="sdchange_text flex justify-start align-center">
					<image src="/static/images/34.png" class="img-16" mode=""></image>
					<view class="text">上传视频</view>
				</view>
			</view> -->
			<!-- <view class="u-p-l-32 u-p-r-32">
				<view class="input1 pop text-center" style="padding:0">
	
				
					<view  @click="upVideo" class="slot-btn card-111bg" style="margin-top:86rpx;margin-left:auto;margin-right:auto;">
						<image src="/static/images/img/25.png" style="width:76rpx;height:76rpx" class="img-16" mode=""></image>
					</view>
			

				
					<view class="" v-if="file == ''" style="font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: rgba(255,255,255,0.8);
					line-height: 33rpx;margin-top:24rpx;margin-bottom:14rpx">点击上传视频</view>
					<view class=""  v-if="file == ''"  style="font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: rgba(255,255,255,0.6);
					line-height: 28rpx;margin-bottom:122rpx">支持MP4、MOV等格式，时长不超过10s</view>
				</view>
			</view> -->
			<view class="home-sdchange flex justify-between align-center">
				<view class="sdchange_icon flex justify-between align-center">
					<!-- <image src="/static/images/index/dark/homeicon.png" class="img-20" mode=""></image> -->
					<!-- <image src="/static/images/index/dark/Mutu-meta.png" class="metaimg" mode=""></image> -->
				</view>
				<view class="sdchange_text flex justify-start align-center">
					<image src="/static/images/34.png" class="img-16" mode=""></image>
					<view class="text">上传图片</view>
				</view>
				<!-- <view class="sdchange_switch flex justify-between align-center"  @click="click_double">
					<view class="">切换{{isDouble?'双':'四'}}列显示</view>
					<image src="/static/images/index/dark/moshi.png" class="img-28" v-if="isDouble"></image>
					<image src="/static/images/index/dark/moshi.png" class="img-28" v-else></image>
				</view> -->
			</view>
			<view class="u-p-l-32 u-p-r-32">
				<view class="input1 pop text-center" style="padding:0">
					<u-upload ref="uUpload" 
					:action="action" 
					:header="header" 
					:form-data="formData" 
					max-count="1"
					:custom-btn="true" 
					class="op1"
					name="img" 
					:show-progress="false" 
					width="100%" 
					@on-remove="onRemove"
					height="100%" 
					image-mode="widthFix"
					style="justify-content: center;"
					@on-success="success" 
					:auto-upload="false" 
					@on-choose-complete="progress">
					<view slot="addBtn" class="slot-btn card-111bg" style="margin-top:86rpx;margin-left:auto;margin-right:auto;">
						<image src="/static/images/img/23.png" style="width:76rpx;height:76rpx" class="img-16" mode=""></image>
					</view>
				</u-upload>
					<!-- <botBtnp style="margin-top: 200rpx;" :btnText="status? '修改图片' : i18n.wechat3"
					@click="bind"></botBtnp> -->
				
					<view class="" v-if="file == ''" style="font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: rgba(255,255,255,0.8);
					line-height: 33rpx;margin-top:24rpx;margin-bottom:14rpx">点击上传图片</view>
					<view class=""  v-if="file == ''"  style="font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: rgba(255,255,255,0.6);
					line-height: 28rpx;margin-bottom:122rpx">支持图片格式：JPG，PNG， Max：10MB</view>
				</view>
			</view>




			<!-- <view class="home-sdchange flex justify-between align-center">
				<view class="sdchange_icon flex justify-between align-center">
				</view>
				<view class="sdchange_text flex justify-start align-center">
					<image src="/static/images/34.png" class="img-16" mode=""></image>
					<view class="text">画面描述</view>
				</view>
			</view> -->
			<!-- <view class="my-filter u-m-t-20">
				<view class="filter-options-box">
						<view class="filter-item name" :class="sortingPrice !== 0? 'active' : ''" @click="changegoods">
							<view class="u-m-r-10">分类</view>
							<image src="/static/images/triangle.png" style="width: 19rpx; height: 13rpx;"></image>
						</view>
						<view class="filter-item name u-m-l-25" :class="sortinggrade !== 0? 'active' : ''" @click="changegrade">
							<view class="u-m-r-10">等级</view>
							<image src="/static/images/triangle.png" style="width: 19rpx; height: 13rpx;"></image>
						</view>
						<view class="filter-item name u-m-l-25" :class="sortingTime !== 0? 'active' : ''" @click="changeSortingTime">
							<view class="u-m-r-10">发行时间</view>
							<image
								:src="
									sortingTime === 0?'/static/images/filter.png' : 
									sortingTime === 1?'/static/images/filterTop.png' : 
									sortingTime === 2?'/static/images/filterBot.png' : ''"
								style="width: 14rpx; height: 25rpx;"
							></image>
						</view>
						<view class="filter-item name u-m-l-25" :class="sortingstate !== 0? 'active' : ''" @click="changestate">
							<view class="u-m-r-10">发售状态</view>
							<image src="/static/images/triangle.png" style="width: 19rpx; height: 13rpx;"></image>
						</view>
					
				</view>
			</view> -->
			<!-- <view class="u-p-l-32 u-p-r-32">
				<view class="input1 pop">
					<u-input v-if="bgUrl" placeholder-style="pclass" v-model="countTxt"  placeholder="画面描述建议：· 以简练的短语描述画面，建议40个字符以上；· 选择合适的风格和高级参数可提升图像的艺术效果。· 支持中英双语输入。" type="textarea" :border="false" :height="279" :auto-height="true" />
					<view class="input001" v-if="!bgUrl">
						<image style="width:286rpx;height:72rpx" src="/static/images/img/13.png"></image>
					</view>
					<view class="flex justify-between align-center tt0">
						<view class="flex align-center">
							<view class="u-m-r-36" @click="bgUrlFun"><image src="/static/images/img/11.png" style="width:28rpx;height:24rpx"></image></view>
							<view class="u-m-r-36" style="color:rgba(255, 255,255, .2)">|</view>
							<view><image src="/static/images/37.png" style="width:36rpx;height:34rpx"></image></view>
						</view>
						<view class="flex align-center t2">
							<view>{{countTxt.length}}/1000</view>
							<view class="u-m-l-36"  style="color:rgba(255, 255,255, .2)">|</view>
							<view class="u-m-l-36" @click="countTxt = ''">清空</view>
						</view>

					</view>

				</view>
			</view> -->


			<!-- <view class="home-sdchange flex justify-between align-center">
				<view class="sdchange_icon flex justify-between align-center">
				</view>
				<view class="sdchange_text flex justify-start align-center">
					<image src="/static/images/34.png" class="img-16" mode=""></image>
					<view class="text">模型主题</view>
				</view>
			</view> -->
			<!-- <view class="u-p-l-32 u-p-r-32">
				<view class="input2 flex justify-between align-center flex-wrap">
					 <view v-for="(item,index) in modelArray" :key="index" v-if="index <= 10">
						 <view  class="itemS" :class="item.flag ? 'itemSactive':''" @click="modelClick(index)">
							<image src="/static/images/img/12.png"  style="width:100%;height:100%" mode=""></image>
							<text>{{item.model_desc}}</text>
						 </view>
					 </view>
					 <view   class="itemS itemSs"  @click="modelClick(999)">
						更多
					 </view>
				</view>
			</view> -->
			<!-- <view class="home-sdchange flex justify-between align-center">
				<view class="sdchange_icon flex justify-between align-center">
				</view>
				<view class="sdchange_text flex justify-start align-center">
					<image src="/static/images/34.png" class="img-16" mode=""></image>
					<view class="text">转换风格</view>
				</view>
			</view> -->
			<!-- <view class="u-p-l-32 u-p-r-32">
				<view class="input2 flex justify-between align-center flex-wrap">
					 <view v-for="(item,index) in modelArray" :key="index" v-if="index <= 10">
						 <view  class="itemS" :class="item.flag ? 'itemSactive':''" @click="modelClick(index)">
							<image src="/static/images/img/12.png"  style="width:100%;height:100%" mode=""></image>
							<text>{{item.model_desc}}</text>
						 </view>
					 </view>
					 <view   class="itemS itemSs"  @click="modelClick(999)">
						更多
					 </view>
				</view>
			</view> -->
			<!-- <view class="home-sdchange flex justify-between align-center">
				<view class="sdchange_icon flex justify-between align-center"></view>
				<view class="sdchange_text flex justify-start align-center">
					<image src="/static/images/34.png" class="img-16" mode=""></image>
					<view class="text">风格选择</view>
				</view>
			</view> -->
			<!-- <view class="u-p-l-32 u-p-r-32">
				<view class="input2 flex justify-between align-center flex-wrap p2">
					 <view v-for="(item,index) in modelStyleArray" :key="index" v-if="index <= 7">
						 <view  class="itemJ" :class="item.flag ? 'itemJactive':''" @click="modelStyleClick(index)">
							<text>{{item.name}}</text>
						 </view>
					 </view>
					 <view   class="itemS itemSs itemSsjj"  @click="modelStyleClick(999)">
						更多
					 </view>
				</view>
			</view> -->
			<!-- <view class="home-sdchange flex justify-between align-center">
				<view class="sdchange_icon flex justify-between align-center"></view>
				<view class="sdchange_text flex justify-start align-center">
					<image src="/static/images/34.png" class="img-16" mode=""></image>
					<view class="text">画面大小</view>
				</view>
			</view> -->
			<!-- <view class="u-p-l-32 u-p-r-32">
				<view class="input2 flex justify-between align-center flex-wrap p2">
					 <view v-for="(item,index) in modelSizeArray" :key="index">
						 <view  class="itemJ" :class="modelSizeClickActive == index ? 'itemJactive':''" @click="modelSizeClick(index,item)">
							<image class="imgJimg" :src="item.url"   mode="widthFix" style="width:34rpx"></image>
							<text>{{item.size_ratio}}</text>
						 </view>
					 </view>
				</view>
			</view> -->
			<!-- <view class="home-sdchange flex justify-between align-center">
				<view class="sdchange_text flex justify-start align-center">
					<image src="/static/images/34.png" class="img-16" mode=""></image>
					<view class="text tit10">高级设置</view>
				</view>
				<view class="sdchange_icon999 flex justify-between align-center">
					<u-switch v-model="checked" active-color="#cafd5c" size="30" inactive-color="#4d4d4d"></u-switch>
				</view>
			</view> -->
			<!-- <view class="u-p-l-32 u-p-r-32">
				<view class="input2 flex justify-between align-center flex-wrap p2">
					 <view v-for="(item,index) in modelSizeArray" :key="index">
						 <view  class="itemJ" :class="item.flag ? 'itemJactive':''" @click="modelStyleClick(index)">
							<image class="imgJimg" :src="item.url"   mode="widthFix" style="width:34rpx"></image>
							<text>{{item.size_ratio}}</text>
						 </view>
					 </view>
				</view>
			</view> -->
			<!-- <view class="home-sdchange flex justify-between align-center">
				<view class="sdchange_text flex justify-start align-center">
					<image src="/static/images/34.png" class="img-16" mode=""></image>
					<view class="text">作图数量</view>
				</view>
				<view class="flex align-center">
					 <view class="jian" @click="jian">-</view>
					 <view class="num">{{num}}</view>
					 <view class="add" @click="jia">+</view>
				</view>
			</view> -->
			<view style="height:50rpx"></view>
			<!-- <view class="home-sdchange flex justify-between align-center">
				<view class="sdchange_t1ext fle8x justify-start align-center">
					使用誉言创作服务表示您已同意<text>《A创作服务协议》《二次元模型Al创作服务协议》</text>
				</view>
			</view> -->
			<view class="home-sdchange flex justify-between align-center">
				<view class="sdchange_t1ext fle8x justify-start align-center">
					<image src="/static/images/img/27.png" style="width:22rpx;height:22rpx;margin-right:4px"></image>
					咒语解析器可以将图片转换为画面描述，帮助你生成一张和上传图片相近的创作。
				</view>
			</view>
			<view class="u-flex justify-between align-center w92 u-m-t-40">
				<view class="histo" @click="go09('/pages/tabbar/bazaar/zyTwohis')">
					<image src="/static/images/img/29.png" style="width:42rpx;height:44rpx;display:block;margin-bottom:3px;margin-left:auto;margin-right:auto;"></image>
					使用历史
				</view>
				<view class="myBtn" @click="go">
					<view class="one">立即生成</view>
					<view class="two">（消耗2积分）</view>
				</view>
			</view>
			<!-- <myfour-goods-list :listData="listData" :listStatus="listStatus" :doubleLine="isDouble"  listType="hmblind" @click="clickGoods" /> -->
			
			<!-- 分类 -->
			<u-select
				:list="goods_class" 
				v-model="goodshow" 
				value-name="id" 
				label-name="name" 
				confirm-color="#000000" 
				:default-value="[goodsListIndex]"
				@confirm="goodsCallback"
			></u-select>
			<!-- 等级 -->
			<u-select
				:list="grade_class" 
				v-model="gradeshow" 
				value-name="id" 
				label-name="name" 
				confirm-color="#000000" 
				:default-value="[gradeListIndex]"
				@confirm="gradeCallback"
			></u-select>
			<!-- 状态 -->
			<u-select
				:list="state_class" 
				v-model="stateshow" 
				value-name="id" 
				label-name="name" 
				confirm-color="#000000" 
				:default-value="[stateListIndex]"
				@confirm="stateCallback"
			></u-select>
			<u-toast ref="uToast" />
		</view>
		
		<!-- <u-tabbar
			:list="tabbar" 
			:mid-button="true" 
			:border-top="false"
			inactive-color="#798387"
			active-color="#CAFD5C"
			mid-button-size = "135"
			bg-color="#242424">
		</u-tabbar> -->
		<!-- 主题 -->
		<u-popup class="pop" safe-area-inset-bottom	 mode="bottom" mask closeable close-icon-color='#fff' close-icon-size="28"	 v-model="modelArrayshow">
				<view class="u-p-l-32 u-p-r-32 u-p-t-50">
					<view class="u-text-center t01  u-m-b-48">选择主题</view>
					<view  class="flex align-center justify-between flex-wrap p1">
						<view  class="popItem"  :class="item.flag ? 'popactive':''" @click="modelClick(index)" v-for="(item,index) in modelArray" :key="index">
							<view  class="u-text-center">{{item.model_desc}}</view>
						</view>
					</view>
					<view class="v1 flex justify-between align-center">
						<view class="v2" @click="rest">重置</view>
						<view class="v3"  @click="succ">确定</view>
					</view>
				</view>
		</u-popup>
		<!-- 风格 -->
		<u-popup class="pop" safe-area-inset-bottom	 mode="bottom" mask closeable close-icon-color='#fff' close-icon-size="28"	 v-model="modelStyleArrayshow">
				<view class="u-p-l-32 u-p-r-32 u-p-t-50">
					<view class="u-text-center t01  u-m-b-48">选择风格</view>
					<view  class="flex align-center justify-between flex-wrap p1">
						<view  class="popItem"  :class="item.flag ? 'popactive':''" @click="modelClick(index)" v-for="(item,index) in modelStyleArray" :key="index">
							<view  class="u-text-center">{{item.name}}</view>
						</view>
					</view>
					<view class="v1 flex justify-between align-center">
						<view class="v2" @click="restStyle">重置</view>
						<view class="v3"  @click="succStyle">确定</view>
					</view>
				</view>
		</u-popup>
		<!-- 视频生视频 -->
		<u-popup class="pop newpop1" 
		 safe-area-inset-bottom	
		 mode="center" 
		 mask 
		 width="618"
		 closeable 
 
		 close-icon-color='#fff' 
		 close-icon-size="28"	 
		 v-model="videoshow">
				<view class="u-p-l-32 u-p-r-32 u-p-t-50 mod1">
					<view class="k1 u-p-b-24  u-p-t-48">视频生视频</view>
					<view class="k2 u-p-b-36">根据上传的参考视频，可以生成与其画面内容相匹配的新视频。</view>
					<image class="u-p-b-36  " src="/static/images/img/24.png" style="display:block;margin-left:auto;margin-right:auto; width:494rpx;height:648rpx"></image>
					<view class="v1 flex justify-between align-center">
						<view class="v20" @click="videoshow = false">我知道啦</view>
					</view>
				</view>
		</u-popup>
		<image v-if="imgShow" @click="txt" src="/static/images/img/31.png" style="width:620rpx;height:800rpx" class="img1"></image>
		<image v-if="imgShowqq" @click="txt('WJBAICM2023')" src="/static/images/img/32.jpg" style="width:620rpx;height:800rpx" class="img1"></image>
	</view>
</template>

<script>
	import count from '../../../components/count.vue'
	import {
		tabbar
	} from "@/common/tabbar.js"
	export default {
		components: {
			count
		},
		data() {
			return {
				active:1,
				fileArr:[],
				videoshow:false,
				file:'',
				action: `${uni.$myAppConfig.baseUrl}/api/author/bgimg`,
				header: {
					token: uni.getStorageSync('token'),
					lang: uni.getStorageSync('lang'),
				},
				formData: {},
				bgUrl:true,
				num:1,
				checked:false,
				modelSizeArray:[],
				modelStyleArray:[],
				modelArrayshow:false,
				modelStyleArrayshow:false,
				countTxt:'',
				active:0,
				modelSizeClickActive:'',
				typeArray:[],
				modelArray:[],
				showTop:false,
				aaa:true,
				type: 0,
				listData: [],
				tabbar: tabbar,
				listStatus: 'loading',
				listPages: 0,
				listLimit: 8,
				screening: [],
				screeningActiveList: [],
				showScreening: false,
				isDouble: true,
				searchKeyword: '',
				searchTypeList: [
					{
						text: '商品',
						id: 1,
					},
					{
						text: '艺术家',
						id: 2,
					}
				],
				searchTypeText: '商品',
				searchTypeId: 1,
				showSearchTypeList: false,
				sortingTime: 0,
				sortingTime1:0,
				sortingPrice: 0,
				sortinggrade: 0,
				sortingstate: 0,
				tabcolor:1,
				// 分类
				goods_class:[],
				goodshow:false,
				goodsListIndex:0,
				screeningId:0,
				// 等级
				grade_class:[],
				gradeshow:false,
				gradeListIndex:0,
				rarity_type:0, //等级传参
				// 状态
				state_class:[],
				stateshow:false,
				stateListIndex:0,
				show_type:0,   //状态传参
				two_class_id:0,
				name:[],
				sizeObj:{},
				imgShow:false,
				imgShowqq:false,
 			};
		},
		onShow() {
			// this.loadData(true, true)
			// if(this.name=[]){
			// 	this.aaa=true
			// }else{
			// 	this.aaa=false
			// }
			
			this.name = uni.getStorageSync('name');
			//this.$forceUpdate(this.name)

		},
		onLoad(name) {
			console.log(name);
			this.getDataList(1)
		},
		onPullDownRefresh() {
			this.loadData(true, true)
		},
		onReachBottom() {
			if(this.listStatus === 'loadmore'){
				this.loadData(false, false)
			}
		},
		methods: {
			qqshequn(){
				this.imgShowqq = true
				this.showTop = false
			},
			xiaoshushou(){
				this.imgShow = true
				this.showTop = false
			},
			txt(){
				uni.setClipboardData({
				data: data,
				success: function () {
					uni.showToast({
						title:"复制成功",
						icon:"none"
					})
				}
			});
				this.imgShow = false
			},
			fun(params){
				this.active = params
			},
			go09(url){
				uni.navigateTo({
					url:url
				})
			},
			bind() {
				// if (this.status) {
				// 	this.file = null
				// 	this.status = false
				// 	return false;
				// }
				// if(this.file === null){
				// 	this.$refs.uToast.show({
				// 		// 修改成功
				// 		title: '请先上传图片',
				// 		type: 'warning',
				// 	})
				// 	return
				// }
				this.$refs.uUpload.upload();
				this.show = true
				// setTimeout(() => {

				// }, 2000)
			},
			success(data, index, lists, name) {
				// console.log(data.code)
				if (data.code == 200) {
					this.getDrawinfo()
					this.show = false
					this.$refs.uToast.show({
						// 修改成功
						title: this.i18n.wechat4,
						type: 'success',
					})
				}
			},
			progress(res, index, lists, name) {
				// console.log(res, index, lists, name)
				this.file = res[0]
			},
			onRemove(res, index, lists, name) {
				// console.log(res, index, lists, name)
				this.file = ''
			},
			bgUrlFun(){
				this.bgUrl = !this.bgUrl
			},
			upVideo(){
				let that = this;
				uni.chooseVideo({
					count: 1,
					limitType:['MP4'],
					success: function(res) {
						// console.log('选择视频成功', res);
						that.showVideo = true;
						that.videoData = res.tempFiles[0];
						that.videoSrc = res.tempFilePaths[0];
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			go(){
			  // model_code  	
			  //    
			  //      
			  let obj = {
				model_code : this.active ,
				prompt : this.countTxt ,
				display_resolution : this.sizeObj.display_resolution ,
				size_ratio : this.sizeObj.size_ratio ,
				width : this.sizeObj.width ,
				height : this.sizeObj.height ,
				num : this.num ,
				accelerate_times :0,
				style_model : 'stm-7R6VQSMP',
				super_size_multiple :'',
				prefine_multiple :'',
				num : this.num ,
			  }
			  this.$u.api.expense(obj).then(res => {
					console.log(res)
				})
			},
			modelSizeClick(index,item){
				this.modelSizeClickActive =index
				this.sizeObj = item
				//this.$set(this.modelSizeArray, index,{...this.modelSizeArray[index],flag:!this.modelSizeArray[index].flag})
			},
			jian(){
				if(this.num <= 1) return
				this.num = this.num - 1
			},
			jia(){
				this.num = this.num + 1
			},
			rest(){
				// this.modelArray.forEach((item)=> item.flag = true)
				this.modelArray.forEach((item)=>{
					item.flag = false
				})
			},
			succ(){
				// this.modelArray.forEach((item)=> item.flag = true)
				// this.modelArray.forEach((item)=>{
				// 	item.flag = true
				// })
				this.modelArrayshow = false
			},
			restStyle(){
				// this.modelArray.forEach((item)=> item.flag = true)
				this.modelStyleArray.forEach((item)=>{
					item.flag = false
				})
			},
			succStyle(){
				// this.modelArray.forEach((item)=> item.flag = true)
				// this.modelArray.forEach((item)=>{
				// 	item.flag = true
				// })
				this.modelStyleArrayshow = false
			},
			activeFun(num,item){
				this.active = item.type
				this.getDataList(item.type)
				this.getInit(item.type)
			},
			modelClick(index){
				if(index == 999){
					this.modelArrayshow = true
					return
				}
				this.$set(this.modelArray, index,{...this.modelArray[index],flag:!this.modelArray[index].flag})
			},
			modelStyleClick(index){
				if(index == 999){
					this.modelStyleArrayshow = true
					return
				}
				this.$set(this.modelStyleArray, index,{...this.modelStyleArray[index],flag:!this.modelStyleArray[index].flag})
			},
			getInit(model_code){
				this.$u.api.modelini({model_code:model_code}).then(res => {
					console.log(res)
					res.data.data.create_option_menu.style.forEach((item)=>item.flag = false) //风格
					res.data.data.create_option_menu.resolution_new.resolution_list.forEach((item)=>item.flag= false) //风格
					this.modelStyleArray = res.data.data.create_option_menu.style//风格
					this.modelSizeArray = res.data.data.create_option_menu.resolution_new.resolution_list//画面大小
				})
			},
			getDataList(type) {
				this.$u.api.aiType({}).then(res => {
					this.typeArray = res.data
					this.getInit(this.typeArray[0].type)
					this.active = this.typeArray[0].type
				})
				this.$u.api.modelList({type:type}).then(res => {
					this.modelArray = res.data
					this.modelArray.forEach((item)=> item.flag = false)
				})
			},
			xiadiao(){
				try {
					uni.removeStorageSync('name');
					this.loadData1()
					this.aaa=false
					this.name=''
				} catch (e) {
					// error
				}
			},
			shanchu(){
				console.log(111);
				
			},
			go1(){
				uni.navigateTo({
					url:'/pages/tabbar/bazaar/huajia'
				})
			},
			loadData(reset, initialize){
				this.two_class_id = uni.getStorageSync('two_class_id');
				
				if(reset){
					this.listData = []
					this.listPages = 0
				}
				this.listStatus = 'loading'
				this.listPages += 1
				
				this.$u.api.one_index({
					page: this.listPages,
					// limit: this.listLimit,
					type:this.type,
					class_id: this.screeningId,
					// key_word: this.searchKeyword,
					dates: this.sortingTime,
					rarity_type: this.rarity_type,
					show_type: this.show_type,
					two_class_id: this.two_class_id,
					name:this.name
				})
				.then(res => {
					this.listData = [...this.listData, ...res.data.list.data]
					this.listStatus = res.data.list.next_page_url ? 'loadmore' : 'nomore'
					if(res.data.list.current_page == 1){
						// 上面一级分类
						let onepoints = []
						onepoints = res.data.goods_class
						if(onepoints.length>9){
							this.screening = onepoints.slice(0, 9)
						}else{
							this.screening = onepoints
						}
						// 分类筛选
						this.goods_class = res.data.goods_class.map((item,index)=>{
							return {...item, extra: index+1};
						})
						let obj = {
							id:0,
							name:'全部',
							extra: 0
						}
						this.goods_class.unshift(obj);
						// 等级筛选
						this.grade_class = Object.keys(res.data.rarity_list).map((key,index) => {
							return { id: parseInt(key), name: res.data.rarity_list[key] ,extra:index};
						});
						// 发售状态筛选
						this.state_class = Object.keys(res.data.show_type_list).map((key,index) => {
							return { id: parseInt(key), name: res.data.show_type_list[key] ,extra:index};
						});
					}
					uni.stopPullDownRefresh()
				})
				.catch(err => {
					uni.stopPullDownRefresh()
					this.listStatus = 'nomore'
				});
				
			},
			loadData1(reset, initialize){
				this.two_class_id = uni.getStorageSync('two_class_id');
				if(reset){
					this.listData = []
					this.listPages = 0
				}
				this.listStatus = 'loading'
				this.listPages += 1
				
				this.$u.api.index({
					page: this.listPages,
					// limit: this.listLimit,
					type:this.type,
					class_id: this.screeningId,
					// key_word: this.searchKeyword,
					dates: this.sortingTime1,
					rarity_type: this.rarity_type,
					show_type: this.show_type,
					two_class_id: this.two_class_id,
					
				})
				.then(res => {
					this.listData = [...this.listData, ...res.data.list.data]
					this.listStatus = res.data.list.next_page_url ? 'loadmore' : 'nomore'
					if(res.data.list.current_page == 1){
						// 上面一级分类
						let onepoints = []
						onepoints = res.data.goods_class
						if(onepoints.length>9){
							this.screening = onepoints.slice(0, 9)
						}else{
							this.screening = onepoints
						}
						// 分类筛选
						this.goods_class = res.data.goods_class.map((item,index)=>{
							return {...item, extra: index+1};
						})
						let obj = {
							id:0,
							name:'全部',
							extra: 0
						}
						this.goods_class.unshift(obj);
						// 等级筛选
						this.grade_class = Object.keys(res.data.rarity_list).map((key,index) => {
							return { id: parseInt(key), name: res.data.rarity_list[key] ,extra:index};
						});
						// 发售状态筛选
						this.state_class = Object.keys(res.data.show_type_list).map((key,index) => {
							return { id: parseInt(key), name: res.data.show_type_list[key] ,extra:index};
						});
					}
					uni.stopPullDownRefresh()
				})
				.catch(err => {
					uni.stopPullDownRefresh()
					this.listStatus = 'nomore'
				});
				
			},
			mallcbtn(){
				this.tabcolor = 1
				this.screening=[]
				this.listData=[]
				this.loadData(true, true)
			},
			marketcbtn() {
				// uni.showToast({
				// 	icon:'none',
				// 	title:'待开放'
				// })
			
				this.tabcolor = 2
				Object.assign(this._data, this.$options.data())
				this.screening = []
				this.listData = []
				this.loadData1(true, true)
			},
			searchChange(){
				this.loadData(true, false)
			},
			changeSearchType(index){
				this.searchTypeText = this.searchTypeList[index].text
				this.searchTypeId = this.searchTypeList[index].id
			},
			// 时间
			changeSortingTime(){
				if(this.sortingTime < 2){
					this.sortingTime += 1
				} else {
					this.sortingTime = 0
				}
				this.sortinggrade = 0
				this.sortingPrice = 0
				this.sortingstate = 0
				this.loadData(true, false)
			},changeSortingTime(){
				if(this.sortingTime1 < 2){
					this.sortingTime1 += 1
				} else {
					this.sortingTime1 = 0
				}
				this.sortinggrade1 = 0
				this.sortingPrice1 = 0
				this.sortingstate1 = 0
				this.loadData(true, false)
			},
			// 分类
			changegoods(){
				this.sortinggrade = 0
				this.sortingstate = 0
				this.sortingPrice = 1
				uni.removeStorageSync('two_class_id');
				this.goodshow = true
			},
			goodsCallback(index){
				console.log(index);
				this.goodsListIndex = index[0].extra;
				this.screeningId = index[0].value
				this.loadData(true, false)
			},
			// 等级
			changegrade(){
				this.sortingstate = 0
				this.sortingPrice = 0
				this.sortinggrade = 1
				this.gradeshow = true
			},
			gradeCallback(index){
				console.log(index);
				this.gradeListIndex = index[0].extra;
				this.rarity_type = index[0].value
				this.loadData(true, false)
			},
			// 状态
			changestate(){
				this.sortingPrice = 0
				this.sortinggrade = 0
				this.sortingstate = 1
				this.stateshow = true
			},
			stateCallback(index){
				console.log(index);
				this.stateListIndex = index[0].extra;
				this.show_type = index[0].value
				this.loadData(true, false)
			},
			changeScreenings(){
				this.showScreening = true
			},
			Skippage(pid){
				// console.log(pid,'pida');
				uni.navigateTo({
					url:'/pages/tabbar/bazaar/mallclassify?pid=' + pid
				})
			},
			//切换单双列
			click_double(){
				this.isDouble=!this.isDouble
			},
			clickGoods(goods){
				if (goods.products_status === 0 || goods.products_status === 5) { //在售
					// uni.navigateTo({
					// 	url: '../../market/goods-def/goods-def?id=' + goods.id
					// })
					uni.navigateTo({
						url: "/pages/market/goods-def/goods-batch?id="+goods.id
					})
				}
				if (goods.products_status === 2) { //拍卖
					uni.navigateTo({
						url: '../../market/goods-auctionDef/goods-auctionDef?id=' + goods.id
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.w92{
width:92%;
margin-left:auto;
margin-right:auto;
}
.histo{
font-size: 28rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255,255,255,0.8);
line-height: 33rpx;
width:140rpx;
margin-right:24rpx
}
.mjstyle{
	width:332rpx;
	height:80rpx;
	line-height:80rpx!important;
	text-align:center;
	background-color:#262626;
	border-radius:78rpx;
	font-size: 28rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: rgba(255,255,255,0.8);
	padding:0!important
}
.mjstyle.active{
	font-size: 28rpx;
	font-family: PingFang SC-Semibold, PingFang SC;
	font-weight: 600;
	color: #FFFFFF;
	border:1px solid #CAFD5C
}
.newpop1 ::v-deep .u-mode-center-box{background: #000;}	
.v20{
background: #CAFD5C;
font-size: 28rpx;
font-family: PingFang SC-Semibold, PingFang SC;
font-weight: 600;
color: #000000;
line-height: 33rpx;
text-align: center;
border-radius: 20rpx;
width: 494rpx;
height: 66rpx;
line-height: 66rpx;
margin-bottom: 66rpx;
margin-left: auto;
margin-right: auto;
}
.mod1{background: #000;border-radius: 20rpx;border: 1px solid rgba(255, 255, 255, 0.2);overflow: hidden;}
.k1{
	font-size: 32rpx;
font-family: PingFang SC-Semibold, PingFang SC;
font-weight: 600;
color: #FFFFFF;
line-height: 38rpx;
}
.k2{
	font-size: 28rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255,255,255,0.8);
line-height: 37rpx;
}
.styp0 ::v-deep .u-checkbox__icon-wrap--checked .uicon-checkbox-mark{color: #000!important;}
.input1  .op1 ::v-deep  .u-list-item{
	border: 0!important;
	margin: 0!important;
}
.input001{
 
	height:320rpx;
	background: linear-gradient(-180deg, rgba(202, 253, 92, 0)  0%,rgba(202, 253, 92, 1) 100%);
	background: url(../../../static/images/img/14.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
 
}
.myBtn{
	width: 686rpx;
	height: 90rpx;
	background: #CAFD5C;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
}
.myBtn .one{
	font-size: 28rpx;
	font-family: PingFang SC-Semibold, PingFang SC;
	font-weight: 600;
	color: #000000;
	line-height: 33rpx;
	padding-top: 5px;
}
.myBtn .two{
	font-size: 24rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #000000;
	line-height: 28rpx;
}
.sdchange_t1ext{
	font-size: 24rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: rgba(255,255,255,0.8);
	line-height: 28rpx;
}
.sdchange_t1ext text{
	color: #CAFD5C;
}
.tit10{
	font-size: 32rpx!important;
	font-family: PingFang SC-Medium, PingFang SC!important;
	font-weight: 500!important;
	color: #FFFFFF!important;
	line-height: 38rpx!important;
}
.jian{
	width: 62rpx;
	height: 62rpx;
	background: rgba(255,255,255,0.15);
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	border: 2rpx solid rgba(255,255,255,0.1);
	color: #fff;
	font-size: 20px;
	text-align: center;
}
.add{
	width: 62rpx;
	height: 62rpx;
	background: rgba(255,255,255,0.15);
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	border: 2rpx solid rgba(255,255,255,0.1);
	font-size: 20px;
	text-align: center;
}
.num{
	width: 62rpx;
	height: 62rpx;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	border: 4rpx solid rgba(255,255,255,0.2);
	font-size: 28rpx;
	font-family: PingFang SC-Semibold, PingFang SC;
	font-weight: 600;
	color: #FFFFFF;
	line-height: 58rpx;
	text-align: center;
	margin-left: 10px;
	margin-right: 10px;
}
.imgJimg{
	position: absolute;
	left: 10%;
	top: 50%;
	z-index: 10;
	transform: translateY(-50%);
}
.itemJ{
	width: 214rpx;
	height: 70rpx;
	background: rgba(255,255,255,0.15);
	border-radius: 98rpx 98rpx 98rpx 98rpx;
	opacity: 1;
	border: 2rpx solid rgba(255,255,255,0.1);
	font-size: 28rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
	text-align: center;
	line-height: 70rpx!important;
	margin-bottom: 22rpx;
	position: relative;
}
.itemJactive{
	width: 214rpx;
	height: 70rpx;
	border-radius: 98rpx 98rpx 98rpx 98rpx;
	opacity: 1;
	border: 2rpx solid #CAFD5C;
	font-size: 28rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #CAFD5C;
	line-height: 33rpx;
}
.itemSsjj{
	width: 214rpx!important;
	height: 70rpx!important;
	border-radius: 98rpx 98rpx 98rpx 98rpx!important;
	opacity: 1!important;
	//border: 4rpx solid rgba(255,255,255,0.2)!important;
	
}

.p1::after,.p2:after{
	content: '';
	width: 31%;
}
.popItem{
	width: 214rpx;
height: 70rpx;
background: rgba(255,255,255,0.15);
border-radius: 98rpx 98rpx 98rpx 98rpx;
opacity: 1;
border: 2rpx solid rgba(255,255,255,0.1);
font-size: 28rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 70rpx;
margin-bottom: 24rpx;
}
.popactive{
	border-radius: 98rpx 98rpx 98rpx 98rpx;
	opacity: 1;
	border: 2rpx solid #CAFD5C;
	font-size: 28rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #CAFD5C;
line-height: 70rpx;
background: transparent;
}
.v1 .v2{
	width: 330rpx;
height: 88rpx;
background: rgba(255,255,255,0.2);
border-radius: 20rpx 20rpx 20rpx 20rpx;
opacity: 1;
line-height: 88rpx;
font-size: 28rpx;
font-family: PingFang SC-Semibold, PingFang SC;
font-weight: 600;
color: #FFFFFF;
line-height: 88rpx;
text-align: center;
}
.v1 .v3{
	width: 330rpx;
	height: 88rpx;
	background: #CAFD5C;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	font-size: 28rpx;
font-family: PingFang SC-Semibold, PingFang SC;
font-weight: 600;
color: #000000;
line-height: 88rpx;
text-align: center;
}
.pop ::v-deep .u-drawer-bottom{
	background: #242424;
	height: 864rpx!important;
}
.p1{
	overflow-y: auto;
	height: 600rpx!important;
}
.t01{
	font-size: 32rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 38rpx;
}
.itemSs{
	font-size: 28rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 33rpx;
border: 1px solid #333;
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: center;
}
.itemS{
	position: relative;
	width: 214rpx;
	height: 102rpx;
	margin-bottom: 30rpx;
	border-radius: 20rpx;
	overflow: hidden;
	border: 1px solid #000;
}
.itemS text{
	font-size: 28rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 33rpx;
	position: absolute;
	width: 214rpx;
	height: 46rpx;
	background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 1;
	display: block;
	left: 6rpx;
	bottom: 0rpx;
	line-height: 46rpx;
}
.itemSactive{
	border: 1px solid #cafd5c;
}
.itemSactive text{
	font-size: 28rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #CAFD5C;
	line-height: 33rpx;
	font-size: 28rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	line-height: 33rpx;
	position: absolute;
	width: 214rpx;
	height: 46rpx;
	background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 1;
	display: block;
	left: 6rpx;
	bottom: 0rpx;
	line-height: 46rpx;
}
.pclass{
	font-size: 24rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255,255,255,0.6);
line-height: 28rpx;
}
.tt0{
	border-top: 1px solid #4a4a4a;
	padding-top: 22rpx;
}
.t2{
	font-size: 24rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 28rpx;

}
.t2 ::v-deep textarea,.input1 ::v-deep textarea{color: #fff;}
.input1{
	border:1px solid rgba(202, 253, 92, 0.20);
	border-radius: 20rpx;
	background: #262626;
	box-sizing: border-box;
	padding: 20rpx;
}
.popFix{
	font-size: 24rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 19rpx;
	position:absolute;
	bottom:108rpx;
	left:50%;
	transform: translateX(-50%);
	display:flex;
	justify-content:space-between;
	align-items:center;
	width:	80%
}
.popFix image{width:68rpx;height:68rpx;margin-bottom:16rpx;margin-left:auto;margin-right:auto;display:block;}
.line-09{border-bottom:1px solid #3a3a3a;padding-top:40rpx;padding-bottom:40rpx}
.t1 view{font-size: 28rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 33rpx;
	margin-bottom:6rpx
}
.t1 text{font-size: 24rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: rgba(255,255,255,0.6);
	line-height: 28rpx;}
.popsty{padding:54rpx 32rpx;box-sizing:border}
.popsty .tit{
	font-size: 32rpx;
font-family: PingFang SC-Semibold, PingFang SC;
font-weight: 600;
color: #FFFFFF;
line-height: 38rpx;
}
.mallunavbar ::v-deep .u-m-r-30{margin-right:0!important} 
.styleMy ::v-deep .u-drawer-left{background:#242424} 
.bg1{
	background-color:#283312;
	padding:16rpx;
	margin-right:18rpx;
	font-size: 24rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #CAFD5C;
	line-height: 28rpx;
	border-radius:104rpx;
}
.mianbaoxie{
	margin-left: 40rpx;
	display: flex;
	border-radius: 30rpx;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 200rpx;
	height: 60rpx;
	background-color: #34533f;
	.x{
		margin-left: 20rpx;
		
	}
}
	.page {
		background-size: 100% 180rpx;
		background-position: 0 0;
		background-repeat: no-repeat;
		// background-color: #FBF7F2;
		.my-filter{
			width: 695rpx;
			margin: 0 auto;
			.filter-options-box{
				.filter-item{
					width: 160rpx;
					font-size: 22rpx;
					background-color: transparent;
					// color: #2D3746;
					justify-content: space-around;
					border-radius: 7rpx;
					background-color: #1E1E1E;
				}
			}
		}
		.home-sdchange{
			width: 100%;
			height: 74rpx;
			border-radius: 10rpx;
			padding: 0 30rpx;
			color: #999999;
			position: relative;
			.sdchange_icon{
				position: absolute;
				top: -20rpx;
				.metaimg{
					width: 90rpx;
					height: 30rpx;
					padding-left: 15rpx;
				}
			}
			.sdchange_text{
				width: 50%;
				.text{
					font-size: 24rpx;
					font-weight: bold;
					color: rgba(255,255,255,0.8);
					padding-left: 15rpx;
				}
			}
			.sdchange_switch{
				width: 50%;
				height: 54rpx;
				font-size: 22rpx;
				color: #000000;
				padding: 0 20rpx;
				border-radius: 12rpx;
				background: linear-gradient(90deg, #ACF887 0%, #86F9AF 100%, #86F9AF 100%);
			}
		}
	}
	.mallunavbar{
	//	box-shadow: 0rpx 5rpx 10rpx 1rpx rgba(134, 249, 175, 0.3);
		.malltab{
			width: 100%;
			height: 88rpx;
			padding: 0 32rpx 0 32rpx;
			.text_green{
				color: #73F6A2;
			}
		}
	}
	.author-avatar{
		width: 50rpx;
		height: 50rpx;
		border-radius: 25rpx;
	}
	.soldout{
		position: absolute;
		top: 0;
		right: 0;
		background: rgba(0,0,0,0.5);
		border-radius: 0 0 0 20rpx;
		padding: 8rpx 15rpx;
		font-size: 26rpx;
		color: #eee;
		z-index: 1;
	}

	.search_box {
		display: flex;
		align-items: center;
		margin: 30rpx 30rpx 0;
		background-color: #fff;
		border-radius: 34rpx;

		.cla {
			display: flex;
			text-align: center;
			margin-left: 24rpx;
			color: #818488;

			.cla_text {
				font-size: 30rpx;
				padding-bottom: 6rpx;
				margin-right: 6rpx;
			}
		}
	}
	.my-search-box{
		position: relative;
		z-index: 0;
		margin-bottom: 0;
		margin-top: calc(var(--status-bar-height) + 15rpx);
	}
	.slide_type_list{
		padding: 40rpx 32rpx 50rpx 32rpx;
		overflow: auto;
		display:inline-flex;
		width: 100%;
    	white-space: nowrap;
		.type_list_cont{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			.list_cont_view{
				position: relative;
				width: 128rpx;
				height: 64rpx;
				font-size: 22rpx;
				font-weight: normal;
				text-align: center;
				line-height: 68rpx;
				margin: 10rpx;
				border-radius: 10rpx;
				white-space: nowrap; /* 设置文本不换行 */
				overflow: hidden; /* 隐藏超出容器的部分 */
				text-overflow: ellipsis; /* 超出部分用省略号表示 */
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center center;
				.list_cont_view_title{
					position: absolute;
					top: 0;
					left: 20rpx;
					z-index: 100;
				}
				.list_cont_view_bg{
					position: absolute;
					top: 0;
					left: 0;
					width: 128rpx;
					height: 64rpx;
					border-radius: 10rpx;
					background-color: #000;
					z-index: 1;
					image{
						opacity:0.6;
						filter: alpha(opacity=60);
						width: 128rpx;
						height: 64rpx;
					}
				}
			}
		}
		view{
			margin-right:16rpx;
			border-radius:78rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(255,255,255,0.8);
			line-height: 33rpx;
			background-color:#262626;
			padding:10rpx 16rpx
		}
		view.active{
			color:#CAFD5C;
			border:1px solid #CAFD5C
		}
	}
	.filter {
		display: flex;
		margin: 34rpx 38rpx 20rpx 42rpx;
		justify-content: space-between;

		.filter_left {
			display: flex;
		}

		.filter_item {
			display: flex;
			align-items: center;
			color: #919191;
			font-size: 24rpx;
			padding: 10rpx 15rpx;
			background-color: rgba(#999999, .3);
			border-radius: 50rpx;

			image {
				width: 14rpx;
				margin-left: 8rpx;
			}
		}

		.filter_item:nth-child(2) {
			margin-left: 40rpx;
		}

		.filter_right {
			display: flex;
			align-items: center;
			color: #666666;
			font-size: 24rpx;
		}
	}

	.filter_selected {
		display: flex;
		margin: 0 30rpx;

		.category {
			display: flex;
			padding: 12rpx 22rpx;
			align-items: center;
			border-radius: 24rpx;
			font-size: 24rpx;
			margin-left: 16rpx;

			.del {
				margin-top: 4rpx;
				margin-left: 8rpx;
			}
		}
	}

	.popup_title {
		margin: 52rpx auto 60rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
	}

	/deep/.u-close--top-right {
		top: 54rpx;
		right: 44rpx;
	}

	.filter_title {
		font-size: 30rpx;
		color: #999999;
		margin-bottom: 58rpx;
	}

	.popular {
		margin-bottom: 42rpx;
		display: flex;
		flex-wrap: wrap;

		.popular_item {
			padding: 22rpx 52rpx;
			border: 1px solid #D4D4D4;
			border-radius: 10rpx;
			margin: 0 16rpx 20rpx 0;
			color: #999999;
			font-size: 26rpx;
		}
	}

	.bot_btn {
		display: flex;
		margin: 96rpx 32rpx 62rpx;

		button {
			flex: 1;
			border-radius: 10rpx;
			font-size: 28rpx;
			height: 80rpx;
			line-height: 80rpx;
		}

		button+button {
			margin-left: 18rpx;
		}

		.reset {
			border: 1px solid #C7CFD4;
			background-color: #fff;
			color: #333333;
		}

		.finish {
			background-color: #764E39;
			color: #fff;
		}
	}

	.checked_style {
		border: 1px solid !important;
	}

	.featured {
		margin: 30rpx 30rpx 0 30rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-bottom: 60rpx;

		.featured_item {
			border-radius: 20rpx;
			width: 334rpx;
			margin-bottom: 20rpx;
			overflow: hidden;

			.plan {
				border-radius: 20rpx;
				width: 100%;
				height: 336rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				position: relative;
			}

			.featured_content {
				padding: 30rpx 24rpx;

				.cont_header {
					display: flex;
					color: #111111;
					font-size: 24rpx;
					align-items: center;

					.avatar_img {
						width: 44rpx;
						height: 44rpx;
						border-radius: 50rpx;
						margin-right: 25rpx;
						overflow: hidden;

						image {
							width: 100%;
						}
					}
				}

				.cont_title {
					font-size: 28rpx;
					font-weight: bold;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.cont_price {
					font-size: 34rpx;
					font-weight: bold;
					margin-top: 40rpx;

					text {
						font-size: 22rpx;
					}
				}
			}

			.like {
				width: 46rpx;
				height: 46rpx;
				border-radius: 50%;
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 24rpx;
				}
			}

			.presale {
				position: absolute;
				font-size: 22rpx;
				bottom: 0rpx;
				left: 0;
				width: 100%;
				background: rgba(0, 0, 0, 0.6);
				padding-left: 16rpx;
			}

			.type {
				position: absolute;
				color: #fff;
				font-size: 20rpx;
				bottom: 18rpx;
				right: 18rpx;
			}
		}
	}

	.loading {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 50rpx;
		height: 50rpx;
		margin-left: -25rpx;
		margin-top: -25rpx;
	}
</style>
